<#assign pageTitle = "个人信息" />
<#assign pageHeader>

</#assign>
<#assign pageContent>
	<article class="w80 fl">
		<div class="u-r-cont">
			<section>
				<div class="">
					<section class="u-r-tit-all">
						<h2 class="unFw">
							<a href="#" class="current">我的信息</a>
							<a  href="/user/vitae/view.html">我的简历</a>
						</h2>
					</section>
					<div class="u-r-all-box" id="p_tCont">
						<!--修改头像，开始-->
						<div class="u-account-box">
							<div class="clearfix">
								<section class="fl u-acc-l">
									<div class="tac ur-titpic">
										<span class="u-r-t-picin">
											<img id="userAvatar" src="${user.avatar!'/static/qdxwx/img/avatar-boy.gif'}" >
										</span>
									</div>
									<div class="tac ur-titbtn">
										<a href="javascript:(0)" id="editimg"  class="upload-img" > <label for="avatar">修改头像</label> </a>
									</div>
								</section>
								<div class="fl u-acc-bottom">
									<form method="post" id="updateForm">
										<input type="hidden" name="userId" value="${user.userId!}" />
										<input type="hidden" id="user-sex" name="sex" value="${user.sex!}" />
										<ol class="u-account-li tac">
											<li>
												<label class="u-a-title">
													<span class="fsize16 c-999">用户Id</span>
												</label>
												<span style="float:right;width: 300px;text-align: left;padding: 0 10px">#{user.userId}</span>
											</li>
											<li>
												<label class="u-a-title">
													<span class="fsize16 c-999">手机号</span>
												</label>
												<#if user.mobile??>
													<span style="float:right;width: 300px;text-align: left;padding: 0 10px">${user.mobile!}</span>
													<#else>
													<a href="javascript:void(0)" style="float:right;width: 300px;text-align: left;padding: 0 10px;color: #eb7350" onclick="bindMobile()">点击绑定手机号码</a>
												</#if>
											</li>
											<li>
												<label class="u-a-title">
													<span class="fsize16 c-999">真实姓名</span>
												</label>
												<input id="realName" type="text" class="u-a-inpt" name="realName" value="${user.realName!}" placeholder="">
											</li>
											<li>
												<label class="u-a-title">
													<span class="fsize16 c-999">昵 称</span>
												</label>
												<input id="userName" type="text" class="u-a-inpt" name="userName" value="${user.userName}" placeholder="">
											</li>
											<li >
												<label class="u-a-title">
													<span class="fsize16 c-999">性 别</span>
												</label>
												<div class="disIb vam">
													<div class="xb-box clearfix tac">
														<a class="mr30 <#if user.sex?? && user.sex == 1>current</#if>" href="javascript:void(0)" onclick="selectSex(1,this)">
															<em class="boy-ioc "> </em>
															<span>男</span>
														</a>
														<a class="<#if user.sex?? && user.sex == 2>current</#if>" href="javascript:void(0)" onclick="selectSex(2,this)">
															<em class="gil-ioc"> </em>
															<span>女</span>
														</a>
													</div>
												</div>
											</li>
											<li>
												<label class="u-a-title">
													<span class="fsize16 c-999">邮 箱</span>
												</label>
												<input type="text" class="u-a-inpt" name="email" id="u-email" value="${user.email!}" placeholder="" onkeyup="$(this).next().html('');">
												<#if !user.email??>
													<span class="u-a-error">请输入邮箱补全信息</span>
												</#if>
											</li>
										</ol>
									</form>
									<div class="mt10 hLh30 tac fsize14 c-333 f-fM">注：完善信息方便找回密码，账户更安全。</div>
									<section class="u-o-right mt50 tac">
										<a class="cou-kscp big-all-btn" href="javascript:void(0)" onclick="updateUserInfo()">更 新 资 料</a>
									</section>
								</div>
							</div>
						</div>
						<!--修改密码，开始-->
						<div class="u-account-box undis">
							<form method="post" name="pwdForm" id="pwdForm">
								<input type="hidden" name="userId" value="${user.userId}" />
								<ol class="u-account-li tac">
									<li>
										<label class="u-a-title">
											<span class="fsize16 c-999">旧密码</span>
										</label>
										<input type="password" class="u-a-inpt" name="nowPassword" value="" placeholder="" maxlength="16">
										<span class="u-a-error"></span>
									</li>
									<li>
										<label class="u-a-title">
											<span class="fsize16 c-999">新密码</span>
										</label>
										<input type="password" class="u-a-inpt" name="newPassword" placeholder="" maxlength="16">
										<span class="u-a-error"></span>
									</li>
									<li>
										<label class="u-a-title">
											<span class="fsize16 c-999">新密码确认</span>
										</label>
										<input type="password" class="u-a-inpt" name="confirmPwd" value="" placeholder="" maxlength="16">
										<span class="u-a-error"></span>
									</li>
								</ol>
							</form>
							<section class="u-o-right mt50 tac">
								<a href="javascript:void(0)" title="修 改 密 码" class="cou-kscp big-all-btn mr20" onclick="updatePwd();">修 改 密 码</a>
							</section>
						</div>
						<!--修改密码，结束-->
					</div>
				</div>
			</section>
			<!-- /我的资料 -->
		</div>
	</article>
	<!-- /右侧内容区 结束 -->
	<script>
		//选择性别
		function selectSex(num, obj) {
			$(obj).parent().children().removeClass("current");
			$(obj).addClass("current");
			$("#user-sex").val(num);
		}
	</script>
</#assign>
<#include "../layouts/layout_uc.ftl">
<script type="text/javascript" src="/static/libs/layui-v2.6.8/layui.js?v=1"></script>
<script type="text/javascript" src="/static/libs/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	var oldEmail="${user.email!}";
	var oldMobile="${user.mobile!}";
	var oldUserName="${user.userName!}";
	$(function(){
		showTab('${index}');//选项控制显示
	});
	layui.config({
		base: '/static/cropper/' //layui自定义layui组件目录
	}).use(['form', 'upload', 'layer','element','croppers'], function () {
		let form = layui.form,
				layer = layui.layer,
				$ = layui.jquery,
				upload = layui.upload,
				croppers = layui.croppers;
		//普通图片上传
		croppers.render({
			elem: '#editimg'
			,saveW:150     //保存宽度
			,saveH:150
			,mark:1    //选取比例
			,area:'840px'  //弹窗宽度
			,url: "/user/upload/temp/image.json"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
			,done: function(json) { //上传完毕回调
				$.post("/user/update/avatar.json", {"avatar": json}, function (request) {
					document.location = '/user/info.html'
				})
			}
		});
	});
	/**
	 * 修改用户信息
	 * @param userId 用户ID
	 */
	function updateUserInfo(userId) {

		var realName = $("#realName").val();
		if (realName === "") {
			return layer.msg("请输入真实姓名!");
		}

		var userName = $("#userName").val();
		if (userName === "") {
			//return layer.msg("请输入一个昵称!");
		}
		var params = $('#updateForm').serialize();
		$.ajax({
			url: '/user/updateUser.json',
			type: 'post',
			dataType: 'json',
			data: params,
			success: function (result) {
				if (result.code === 0) {
					layer.msg("保存成功", {time: 3000});
				}else {
					layer.msg(result.msg, {time: 3000});
				}

			}
		});
	}
	/**
	 * 选项控制显示
	 */
	function showTab(_in){
		$(".c-tab-title > a.clickAvailable").click(function(){
			$(".c-tab-title > a.clickAvailable").removeClass('current');
			$(this).addClass('current');
			var _index = $(this).index()-1;
			$("#p_tCont > div").hide();
			$($("#p_tCont > div")[_index]).show();
		});

		$(".c-tab-title > a.clickAvailable").removeClass('current');
		$($(".c-tab-title > a.clickAvailable")[_in]).addClass('current');
		$("#p_tCont > div").hide();
		$($("#p_tCont > div")[_in]).show();
	}

	/**
	 * 修改密码
	 */
	function updatePwd() {
		$(".u-a-error").html("");
		var oldPwd = $("input[name='nowPassword']").val();
		if (oldPwd.trim() === "") {
			return layer.msg('请输入原始密码！');
		}
		var newPassword = $("input[name='newPassword']").val();
		if (newPassword.trim() === "") {
			return layer.msg('请输入新密码！');
		}
		var confirmPwd = $("input[name='confirmPwd']").val();
		if (confirmPwd.trim() === "") {
			return layer.msg('请输入确认密码！');
		}
		var params = $("#pwdForm").serialize();
		$.ajax({
			url: '/user/updatePwd.json',
			type: 'post',
			dataType: 'json',
			data: params,
			success: function (result) {
				if (result.code === 0) {
					layer.msg(result.msg, {time: 500});
				} else {
					layer.msg(result.msg);
				}
			},
			error: function (error) {
				layer.msg('系统繁忙，请稍后再操作！');
			}
		});
	}

	//绑定手机
	function bindMobile() {
		layer.open({
			type: 2,
			title: null,
			area: ['625px', '455px'],
			content: '/user/binding/mobile.html'
		});
	}
</script>